<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
            font-size: 14px;
        }

        #l-map {
            height: 100%;
            width: 100%;
        }

        #r-result {
            width: 100%;
            text-align: center;
            margin-top: 5px;
            margin-bottom: 5px;
        }

        #suggestId{
            height: 30px;
            width: 400px;
            margin-left: 10px;
        }

        .layui-btn {
            display: inline-block;
            height: 38px;
            line-height: 38px;
            padding: 0 18px;
            background-color: #009688;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            font-size: 14px;
            border: none;
            border-radius: 2px;
            cursor: pointer;
            position: absolute;
            right: 10px;
            bottom: 10px;
            z-index: 9999999;
        }

        .lngLat{
            float: right;
            margin-left: 10px;
        }
        .lngLat input{
            height: 30px;
            margin-left: 10px;
        }
    </style>

    <script type="text/javascript" src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=X8as5aIx5QE6Eb1LqhKtqmINEG0ZYyXw"></script>

    <title></title>
</head>
<body>

<div id="r-result">
    搜索:<input type="text" id="suggestId" size="20" value=""/>

    <span class="lngLat">维度:<input class="lat" type="text" value="{{$latitude}}" ></span>
    <span class="lngLat">经度:<input class="lng" type="text" value="{{$longitude}}" ></span>

</div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>

<div id="l-map"></div>

<button type="button" class="layui-btn">点击确认</button>

</body>
</html>
<script type="text/javascript">

    var myIcon = new BMap.Icon("/Modules/chinadmin/assets/img/shigu.png",new BMap.Size(24, 32));    //红事故
    //var myIcon = new BMap.Icon("/Modules/chinadmin/assets/img/weixiudian.png", new BMap.Size(24, 32)); //黑维修点

    // 百度地图API功能
    function G(id) {
        return document.getElementById(id);
    }

    var map = new BMap.Map("l-map");

    map.enableScrollWheelZoom(true);

    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
        {
            "input": "suggestId"
            , "location": map
        });

    ac.addEventListener("onhighlight", function (e) {  //鼠标放在下拉列表上的事件
        var str = "";
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
            value = _value.province + _value.city + _value.district + _value.street + _value.business;
        }
        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

        value = "";
        if (e.toitem.index > -1) {
            _value = e.toitem.value;
            value = _value.province + _value.city + _value.district + _value.street + _value.business;
        }
        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
        G("searchResultPanel").innerHTML = str;
    });

    var myValue;
    ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
        G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
        setPlace();
    });

    function setPlace() {
        map.clearOverlays();    //清除地图上所有覆盖物
        function myFun() {

            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果

            map.centerAndZoom(pp, 18);
            add_point(pp.lng,pp.lat)


            // map.addOverlay(new BMap.Marker(pp));    //添加标注

        }

        var local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun
        });


        local.search(myValue);
    }

    //leapmary#############################################
    $(".layui-btn").click(function () {

        var p_layer = parent.layer.getFrameIndex(window.name); //获取窗口索引
        parent.layer.close(p_layer);
        parent.layui.$('.{{$mds}}_longitude').val(map.result_lng);
        parent.layui.$('.{{$mds}}_latitude').val(map.result_lat);
        typeof parent.self_function === "function" ? parent.self_function(map,'{{$mds}}') : false;

    });

    var lng = '{{$longitude}}';
    var lat = '{{$latitude}}';

    if(lat != ''){
        map.centerAndZoom(new BMap.Point(lng, lat), 12); // 初始化地图,设置中心点坐标和地图级别
        add_point(lng,lat);
    }else{
        map.centerAndZoom("西安", 12);                   // 初始化地图,设置城市和地图级别。
    }

    //地图点击事件
    map.addEventListener('click', function (e) {

        map.result_lng = e.Ag.lng;
        map.result_lat = e.Ag.lat;

        $(".lng").val(e.Ag.lng);
        $(".lat").val(e.Ag.lat);

        map.clearOverlays();    //清除地图上所有覆盖物
        //e.Ag.lat
        //e.Ag.lng
        add_point(e.Ag.lng,e.Ag.lat);

    });
    
    function add_point(lng,lat) {
        setll(lng,lat);

        var point = new BMap.Point(lng,lat);

        var marker = new BMap.Marker(point, {
            enableDragging: true,   //可拖拽
            icon: myIcon
        });

        map.addOverlay(marker);
        marker.addEventListener("dragend", function (e) { //监听标注的dragend拖动事件 事件，获取拖拽后地理坐标
            setll(e.point.lng,e.point.lat);
        });
    }

    function setll(lng,lat) {
        map.result_lng = lng;
        map.result_lat = lat;

        $(".lng").val(lng);
        $(".lat").val(lat);
    }

</script>
